<template>
  <div class="page">
    <div class="header-num">
      <div><span class="page-num">4</span><span class="page-title">建房信息</span></div>
      <div class="plan">4/5</div>
    </div>
    <div class="file-box">
      <div class="file-item">
        <div class="title">建房类型</div>
        <van-divider />
        <div class="container">
          <van-radio-group v-model="buildInfo.buildType" direction="horizontal" class="radio-group">
            <van-radio v-for="(item, index) in buildListDict" :key="index" :name="item.dictionaryValue" icon-size="15px" class="radio-item">
              {{ item.dictionaryName }}
            </van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <div class="file-box">
      <div class="file-item">
        <div class="title">申请理由</div>
        <van-divider />
        <div class="container">
          <van-radio-group v-model="buildInfo.applyReasonsType" direction="horizontal" class="radio-group">
            <van-radio
              v-for="(item, index) in reasonListDict"
              :key="index"
              :name="item.dictionaryValue"
              icon-size="15px"
              class="radio-item raido3item"
            >
              {{ item.dictionaryName }}
            </van-radio>
          </van-radio-group>
          <van-field
            v-model="buildInfo.applyReasonsDesc"
            rows="3"
            autosize
            label=""
            type="textarea"
            maxlength="100"
            placeholder="申请理由"
            show-word-limit
            class="noPadding"
          />
        </div>
      </div>
    </div>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="goToPrevious">上一步</van-button>
      <van-button :loading="isCommit" type="button" class="cus-btn btn-default" @click="handleSave">保存</van-button>
      <van-button type="button" class="cus-btn btn-primary" @click="goToNext">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import $localStorage from '@/utils/localStorage.js'
import { getDictData } from '@/utils/data.js'
import { saveBuildApply } from '@/service/build-apply'
export default {
  components: {},
  setup() {
    const router = useRouter()
    const state = reactive({
      isCommit: false,
      buildInfo: {
        buildType: '1',
        applyReasonsType: '1',
        applyReasonsDesc: '',
      },
      buildListDict: [
        // { dictionaryName: '原址翻建', dictionaryValue: '1' },
        // { dictionaryName: '改扩建', dictionaryValue: '2' },
        // { dictionaryName: '异地新建', dictionaryValue: '3' },
      ],
      reasonListDict: [
        // { dictionaryName: '无房户', dictionaryValue: '1' },
        // { dictionaryName: '危房户', dictionaryValue: '2' },
        // { dictionaryName: '住房困难户', dictionaryValue: '3' },
        // { dictionaryName: '五保户', dictionaryValue: '4' },
        // { dictionaryName: '其他', dictionaryValue: '5' },
      ],
    })

    // 获取建房类型字典
    getDictData('BUILD_TYPE').then((list) => {
      state.buildListDict = list
    })
    // 获取申请理由字典
    getDictData('APPLY_REASONS_TYPE').then((list) => {
      state.reasonListDict = list
    })

    onMounted(async () => {
      if ($localStorage.get('buildInfo_govern')) {
        state.buildInfo = JSON.parse($localStorage.get('buildInfo_govern'))
      }
    })

    // 上一步
    const goToPrevious = () => {
      $localStorage.set('buildInfo_govern', JSON.stringify(state.buildInfo))
      router.push({ path: `/government/build-apply/apply-base` })
    }
    // 下一步
    const goToNext = () => {
      $localStorage.set('buildInfo_govern', JSON.stringify(state.buildInfo))
      router.push({ path: `/government/build-apply/apply-materials` })
    }
    // 保存
    const handleSave = () => {
      $localStorage.set('buildInfo_govern', JSON.stringify(state.buildInfo))
      const applyUserInfo = JSON.parse($localStorage.get('applyUserInfo_govern'))
      const familyMemberList = JSON.parse($localStorage.get('familyMemberList_govern'))
      const homesteadForm = JSON.parse($localStorage.get('homesteadForm_govern'))
      const buildInfo = JSON.parse($localStorage.get('buildInfo_govern'))
      let params = Object.assign({ isSubmit: '0', familyMemberList: familyMemberList }, applyUserInfo, homesteadForm, buildInfo)
      state.isCommit = true
      saveBuildApply(params)
        .then((res) => {
          if (res.code == 100) {
            Toast.success('保存成功')
            setTimeout(() => {
              router.push({ path: '/government/record-apply/record-list' })
            }, 500)
          }
          state.isCommit = false
        })
        .catch(() => {
          state.isCommit = false
        })
    }

    return {
      ...toRefs(state),
      goToNext,
      goToPrevious,
      handleSave,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .file-box {
    .file-item {
      background-color: @fc;
      margin-bottom: 12px;
      .borderRadius(10px);
      .title {
        font-size: 16px;
        font-weight: bold;
        padding: 13px 14px 0;
      }
      .red-desc {
        font-size: 14px;
        font-weight: 400;
        color: #ff0000;
      }
      .container {
        padding: 8px 14px 13px;
        .radio-group {
          display: flex;
          flex-wrap: wrap;
          .radio-item {
            width: 30%;
            margin-bottom: 10px;
          }
        }
        .van-radio--horizontal {
          margin-right: 0;
        }
      }
    }
  }
  .btn-group {
    margin: 50px 0 20px;
    position: fixed;
    bottom: 0;
    .cus-btn {
      margin-right: 10px;
      &:nth-last-child(0) {
        margin: 0;
      }
    }
  }
}
</style>
